//home-echart
<template>
  <div class="mapEchart" :status="siderOpened"></div>
</template>
<script>
import echarts from "echarts";
import { debounce } from "@/utils";
import dzMap from "../../assets/json/cdMap.json";
export default {
  name: "EchartMap",
  data() {
    return {
      chart: null,
      echartsData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize();
        }
      }, 100);
      window.addEventListener("resize", this.__resizeHandler);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);
      echarts.registerMap("DZ", dzMap);
      this.chart.setOption({
        backgroundColor: "transparent", //背景颜色
        tooltip: {
          trigger: "item",
          formatter: "{b}-用卡量：{c}"
        },
        visualMap: {
          show: false,
          calculable: false, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
          inRange: {
            color: ["#0D1F65", "#0D1F65", "#0D1F65"] //颜色
          }
        },
        series: [
          {
            zoom: 1.2, //放大比例
            name: "达州地图",
            type: "map",
            mapType: "DZ",
            label: {
              show: true,
              fontSize: 10,
              color: "#fff",
              fontWeight: 700
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(122, 238, 252, 1)",
                areaColor: "#0D1F65"
              },
              emphasis: {
                areaColor: "rgba(122, 238, 252, 1)",
                label: {
                  color: "#fff"
                }
              }
            },
            data: this.echartsData
          }
        ]
      });
      //设置点击事件
      this.chart.off("click");
      this.chart.on("click", params => {
        var data = params.data;
        this.$emit("clickMap", data);
      });
    }
  },
  computed: {
    siderOpened() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.__resizeHandler();
        }, 300);
      });
      return this.$store.state.app.sidebar.opened;
    }
  }
};
</script>
<style lang='scss' scoped>
.mapEchart {
  width: 100%;
  height: 100%;
}
</style>